<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>02_事件的绑定方式</title>
</head>

<body>
    <div id="box">点我试试看</div>

    <script>
        var box = document.getElementById("box")

        /* 注册事件监听器 */
        box.onclick = function(e){
            console.log("onclick1");
        }

        box.onclick = function(e){
            console.log("onclick2");
        }

        // 注销事件监听器
        box.onclick = null

        /* 绑定事件处理器 */
        box.addEventListener(
            // 事件类型
            "click",

            // 事件处理器函数
            function(e){
                console.log("addEventListener1",e);
            }
        )

        /* addEventListener可以绑定多个事件处理器 */
        function handler2(e){
            console.log("handler2",e);
        }
        box.addEventListener(
            // 事件类型
            "click",

            // 事件处理器函数
            handler2
        )

        /* 解绑事件监听器 */
        box.removeEventListener(
            // 事件类型
            "click",
            
            // 事件处理器
            handler2
        )
        
    </script>
</body>

</html>